<template>
    <div class="photoInfo">
      <!-- 文章内容 -->
      <div class="info">
        <h3>{{ item.title }}</h3>
        <p class="clearfix"><span class="time">发表时间：{{ item.add_time | timeFormat }}</span><span class="click">点击：{{ item.click }}次</span></p>
        <hr />
        <!-- 缩略图 -->
        <div class="pics">
          <vue-preview :slides="imgList"></vue-preview>
        </div>
        <!-- 文章内容部分 -->
        <div class="content" v-html="item.content"></div>
      </div>
      <!-- 评论部分 -->
      <com-comment :id="this.id"></com-comment>
    </div>
</template>

<script>
import Comment from './Comment.vue'
export default {
// 评论组件
components: {
  'com-comment': Comment
},
created() {
  this.getInfo()
  this.getImgList()
},
data() {
  return {
    id: this.$route.params.id,
    // 内容详情
    item: {},
    // 图片数据
    imgList: [],
  }
},
methods: {
  // 获取详情数据
  async getInfo() {
    const {data: dt} = await this.$http.get(`/api/getimageInfo/${this.id}`)
    // console.log(dt)
    this.item = dt.message[0]
  },
  // 获取图片列表
  async getImgList() {
    const {data: dt} = await this.$http.get(`/api/getthumimages/${this.id}`)
    // console.log(dt)
    if (dt.status === 0) {
      dt.message.forEach(value => {
        value.msrc = value.src
        value.w = 600
        value.h = 400
      })
      this.imgList = dt.message
    }
  }
}
}
</script>

<style scoped>
/* * {
  margin: 0;
  padding: 0;
} */
body {
  background-color: #fff;
}
img {
  vertical-align: middle;
}
.photoInfo {
  padding: 0 5px;
}
hr {
  margin: 8.5px 0;
}
.info h3 {
  margin: 15px 0;
  font-size: 15px;
  text-align: center;
  color: #26a2ff;
}
.info p {
  font-size: 13px;
}
.clearfix:before, .clearfix:after {
	content: "";
	display: table;
}
.clearfix:after {
	clear: both;
}
.clearfix {
	*zoom: 1;
}
.info p .time {
  float: left;
}
.info p .click {
  float: right;
}
.photoInfo {
  font-size: 13px;
  line-height: 30px;
}
</style>
